<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备类型管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form :model="deviceMainItemQuery" inline>
        <el-form-item label="项目编码">
          <el-input v-model="deviceMainItemQuery.projectCode"/>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="deviceMainItemQuery.projectName"/>
        </el-form-item>
        <el-form-item>
          <el-select v-model="deviceMainItemQuery.projectType" placeholder="请选择项目类型" style="width: 150px;">
            <el-option label="所有" value=""></el-option>
            <el-option label="设备保养" value="1"></el-option>
            <el-option label="设备检点" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="loadTasks(0)" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row style="margin: 0px 10px;background-color: ghostwhite;padding: 0px 10px">
    <el-col :span="24">
      <el-button-group>
        <el-button type="primary" @click="addTask" >新增</el-button>
        <el-button @click="exportToExcel" :style="{ backgroundColor: '#90EE90', borderColor: '#90EE90', color: '#FFF' }">导出</el-button>
      </el-button-group>
    </el-col>
  </el-row>
  <!-- 数据列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="deviceMainItems" border stripe
                row-key="projectCode"
                ref="taskTable">
        <el-table-column prop="projectCode" label="项目编码"/>
        <el-table-column prop="projectType" label="项目类型">
          <template v-slot="scope">
      <span>
        {{ scope.row.projectType == 1 ? '设备保养' : '设备检点' }}
      </span>
          </template>
        </el-table-column>
        <el-table-column prop="projectContent" label="项目内容"/>
        <el-table-column prop="standard" label="标准"/>
        <el-table-column label="是否启用">
          <template #default="scope"> <!-- 或者使用 slot-scope="scope" -->
            <span>{{ scope.row.enabled ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-link  style="margin: 0px 5px" type="primary" @click="openEditDialog(scope.row)"><el-icon><EditPen /></el-icon>编辑</el-link>
            <el-link  style="margin: 0px 5px" type="primary" @click="deleteTask(scope.row)"><el-icon><Delete /></el-icon>删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <el-dialog
      title="新增任务"
      v-model="dialogVisible"
      width="50%"
      @close="resetForm">
    <el-form :model="deviceMainItemFrom" ref="taskFormRef" label-width="120px">
      <!-- 任务标题 -->
      <el-form-item label="项目编码" prop="projectCode">
        <el-input v-model="deviceMainItemFrom.projectCode" placeholder="请输入项目编码"/>
        <el-button type="primary" @click="generateDeviceCode">生成编码</el-button>
      </el-form-item>
      <!-- 任务工期 -->
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="deviceMainItemFrom.projectName" placeholder="请输入设备名称" />
      </el-form-item>
      <el-form-item label="项目类型" prop="projectType">
        <el-radio-group v-model="deviceMainItemFrom.projectType">
          <el-radio :label="1">设备保养</el-radio>
          <el-radio :label="2">设备检点</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否启用" prop="projectType">
        <el-radio-group v-model="deviceMainItemFrom.enabled">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="项目内容" prop="projectContent">
        <el-input v-model="deviceMainItemFrom.projectContent" placeholder="请输入项目内容" />
      </el-form-item>
      <el-form-item label="标准" prop="standard">
        <el-input v-model="deviceMainItemFrom.standard" type="textarea" placeholder="标准" />
      </el-form-item>

      <!-- 表单操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--编辑任务-->
  <el-dialog
      title="新增任务"
      v-model="EditdialogVisible"
      width="50%"
      @close="resetForm">
    <el-form :model="deviceMainItemFrom" ref="taskFormRef" label-width="120px">
      <!-- 任务标题 -->
      <el-form-item label="项目编码" prop="projectCode">
        <el-input v-model="deviceMainItemFrom.projectCode" placeholder="请输入项目编码"/>
        <el-button type="primary" @click="generateDeviceCode">生成编码</el-button>
      </el-form-item>
      <!-- 任务工期 -->
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="deviceMainItemFrom.projectName" placeholder="请输入设备名称" />
      </el-form-item>
      <el-form-item label="项目类型" prop="projectType">
        <el-radio-group v-model="deviceMainItemFrom.projectType">
          <el-radio :label="1">设备保养</el-radio>
          <el-radio :label="2">设备检点</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否启用" prop="enabled">
        <el-radio-group v-model="deviceMainItemFrom.enabled">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="项目内容" prop="projectContent">
        <el-input v-model="deviceMainItemFrom.projectContent" placeholder="请输入项目内容" />
      </el-form-item>
      <el-form-item label="标准" prop="standard">
        <el-input v-model="deviceMainItemFrom.standard" type="textarea" placeholder="标准" />
      </el-form-item>

      <!-- 表单操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="EditsubmitForm">提交</el-button>
        <el-button @click="EditdialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--详情信息-->
  <el-dialog v-model="dialogVisibleDetail" title="设备信息">
    <div>
      <p><strong>设备编码:</strong> {{ selectedDevice.deviceCode }}</p>
      <p><strong>设备名称:</strong> {{ selectedDevice.deviceName }}</p>
      <p><strong>品牌:</strong> {{ selectedDevice.brand }}</p>
      <p><strong>型号:</strong> {{ selectedDevice.model }}</p>
      <p><strong>备注:</strong> {{ selectedDevice.remarks }}</p>
      <p><strong>车间名字:</strong> {{ selectedDevice.workshopName }}</p>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleDetail = false">取 消</el-button>
      </span>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {ElMessage, ElMessageBox} from "element-plus";
import deviceRequest from "@/api/device.js";
import * as XLSX from 'xlsx';

let workshops = ref([]); // 初始为 null\
let categorys = ref([]); // 初始为 null\
let selectedTask = ref(({}));
let deciveTypeForm =ref({
  deviceTypeCode: '',
  deviceTypeName: '',
  isEnabled: 1, // 默认启用状态
  remarks: '',
  isParent: 0, // 默认不是父节点
  parentCode: '',
});
let currentCodeIndex = 100;
let deviceMainItemFrom = ref({});
let deviceMainItemQuery=ref({});
let EmptytaskQuery=ref({});
let selectedTaskId = ref([]);
let batchSelected = ref({});
let  taskDetailId = ref(-1);

let selectedDevice= ref({});
const resetForm = () => {
  deviceMainItemFrom.value = {
    deviceTypeCode: '',
    deviceTypeName: '',
    isEnabled: '',
    remarks: '',
    isParent:'',
    parentCode:''
  };
};
const route = useRoute();
const columns = [
  { prop: 'task_id', label: '任务编号' },
  { prop: 'task_title', label: '任务标题' },
  { prop: 'task_desc', label: '任务描述' },
  { prop: 'start_time', label: '开始时间' },
  { prop: 'end_time', label: '结束时间' },
  { prop: 'task_duration', label: '工期' },
  { prop: 'task_progress', label: '进度' },
];
const project = ref({});
const users = ref({});
const deviceMainItems = ref([]);
const curUserId = ref(-1);
const dialogVisible = ref(false);
const EditdialogVisible = ref(false);
const dialogVisibleDetail = ref(false);
const editTask = ref({});
const defaultProps = {
  children: 'children',
  label: 'task_title',
};

const isBatchEdit = ref(false);
const openEditDialog = (row) => {
  deviceMainItemFrom.value=row;
  console.log(deviceMainItemFrom.value);
  EditdialogVisible.value = true;

};

const handleDialogClose = () => {
  // 在这里可以处理关闭弹窗时的逻辑
};
const deleteTask = (row) =>{


  console.log(row.deviceCode);
  ElMessageBox.confirm(
      '您确定要将任务删除吗？',
      '提示',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(()=>{

    if(!row.parent){
      deviceRequest.deleteDeviceledger(row.deviceCode,res=>{
        loadTasks(0);
        window.location.reload();
      })
    }else {
      ElMessage({
        type:"warning",
        message:"您选中的项目包含子项目，请先删除子项目"
      });
      return;
    }
  })
};
const submitEditForm = () => {

};
onMounted(() => {
  loadTasks(0);
  loadWorkshops();
  loadCategorys();
});

function exportToExcel() {
  // 转换数据格式为 Excel 所需的格式
  const worksheet = XLSX.utils.json_to_sheet(deviceMainItems.value);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, '设备信息');
  // 导出 Excel 文件
  XLSX.writeFile(workbook, '设备信息.xlsx');
}
function viewDeviceInfo(device){
  selectedDevice.value = device;
  console.log(selectedDevice.value);
  dialogVisibleDetail.value = true;
}
function loadCategorys(){
  deviceRequest.loadCategorys(res=>{
    categorys.value = res.data;
  })
}
function loadWorkshops(){
  deviceRequest.workshoplist(res=>{
    workshops.value = res.data;
    console.log("workshop集合"+workshops.value);
  });
}
function EditsubmitForm(){
    console.log(deviceMainItemFrom.value);
    deviceRequest.EditMainTainForm(deviceMainItemFrom.value,res=>{
      loadTasks(0);
      EditdialogVisible.value=false;
    });
}

function generateDeviceCode(){
  deviceMainItemFrom.value.deviceCode = `DC${currentCodeIndex}`;
  currentCodeIndex++; // 增加索引以便下次生成下一个编码
}
function submitForm(){
  console.log(deviceMainItemFrom.value);
  deviceRequest.adddeviceMainItemFrom(deviceMainItemFrom.value,res=>{
    loadTasks(0);
    resetForm();
    dialogVisible.value = false;
  });


}
function handleSelectionChange(val){
}
function addSonTask(select){
  selectedTask.value=select;
  console.log("选中的数据",selectedTask.value);
  dialogVisible.value= true;

}
function loadUser(UserId){

}
function loadProject(projectId) {

}
function  addTask(){
  dialogVisible.value = true;
  console.log(dialogVisible.value);
}
function batchDeleteTask() {
}
function batchEditTask(){
  isBatchEdit.value=true;
  editTask.value={};
  EditdialogVisible.value = true;

}
function loadTasks(parentId) {

  deviceRequest.loadDeviceMainItems(deviceMainItemQuery.value,1,10,res=>{
    deviceMainItems.value=res.data;
    console.log(deviceMainItems);
  })
}
function loadChildrenTask(deviceType,node,resole){
  console.log(deviceType.deviceTypeCode);
  console.log(node);
  deviceRequest.loaddeviceMainItems(deviceMainItemQuery.value,deviceType.deviceTypeCode,1,10,res=>{
    resole(res.data);
  })

}
function showDetail(task) {

}
</script>
